JavaScript 可选链赋值：深入研究安全属性修改

如果您使用 JavaScript 有一段时间了，那么您一定遇到过可怕的错误，该错误会停止应用程序的运行："TypeError: Cannot read properties of undefined"。 这个错误是一个经典的必经之路，通常发生在我们尝试访问一个值的属性时，我们认为它是一个对象，但结果是 `undefined`。

现代 JavaScript，特别是 ES2020 规范，为我们提供了一个强大而优雅的工具来解决属性读取问题：可选链运算符 (`?.`)。 它将深度嵌套的防御性代码转换为简洁的单行表达式。 这自然会引出一个后续问题，世界各地的开发人员都在问：如果我们能安全地读取一个属性，我们也能安全地写入一个属性吗？ 我们能做类似“可选链赋值”的事情吗？

本综合指南将探讨这个问题。 我们将深入研究为什么这个看似简单的操作不是 JavaScript 的一个特性，更重要的是，我们将揭示强大的模式和现代运算符，这些模式和运算符使我们能够实现相同的目标：安全、有弹性且无错误地修改可能不存在的嵌套属性。 无论您是在前端应用程序中管理复杂的状态、处理 API 数据还是构建强大的后端服务，掌握这些技术对于现代开发都至关重要。

快速回顾：可选链 (`?.`) 的强大功能

在开始赋值之前，让我们简要回顾一下可选链运算符 (`?.`) 如此不可或缺的原因。 它的主要功能是简化对连接对象链深处属性的访问，而无需显式验证链中的每个链接。

考虑一个常见的场景：从复杂的 user 对象中获取用户的街道地址。

旧方法：冗长且重复的检查

如果没有可选链，您需要检查对象的每个级别，以防止任何中间属性（`profile` 或 `address`）丢失时的 `TypeError`。

代码示例：

const user = { id: 101, name: 'Alina', profile: { // address is missing age: 30 } }; let street; if (user && user.profile && user.profile.address) { street = user.profile.address.street; } console.log(street); // 输出：undefined（没有错误！）

这种模式虽然安全，但很繁琐且难以阅读，尤其是在对象嵌套越来越深的情况下。

现代方法：使用 `?.` 简洁明了

可选链运算符允许我们用一个高度可读的行重写上面的检查。 它的工作原理是立即停止评估，如果 `?.` 前面的值是 `null` 或 `undefined`，则返回 `undefined`。

代码示例：

const user = { id: 101, name: 'Alina', profile: { age: 30 } }; const street = user?.profile?.address?.street; console.log(street); // 输出：undefined

该运算符也可以与函数调用 (`user.calculateScore?.()`) 和数组访问 (`user.posts?.[0]`) 一起使用，使其成为安全数据检索的多功能工具。 但是，至关重要的是要记住它的性质：它是一种只读机制。

百万美元问题：我们可以使用可选链赋值吗？

这就引出了我们话题的核心。 当我们尝试在赋值的左侧使用这种非常方便的语法时会发生什么？

让我们尝试更新用户的地址，假设该路径可能不存在：

代码示例（这将失败）：

const user = {}; // 尝试安全地赋值一个属性 user?.profile?.address = { street: '123 Global Way' };

如果您在任何现代 JavaScript 环境中运行此代码，您不会得到 `TypeError`——相反，您会遇到另一种错误：

Uncaught SyntaxError: Invalid left-hand side in assignment

为什么这是一个语法错误？

这不是运行时错误； JavaScript 引擎甚至在尝试执行它之前就将其识别为无效代码。 原因在于编程语言的一个基本概念：lvalue（左值）和 rvalue（右值）之间的区别。

• lvalue 表示一个内存位置——一个可以存储值的目标。 将其视为容器，如变量 (`x`) 或对象属性 (`user.name`)。
• rvalue 表示一个可以分配给 lvalue 的纯值。 它是内容，如数字 `5` 或字符串 `"hello"`。

不能保证表达式 `user?.profile?.address` 解析为内存位置。 如果 `user.profile` 是 `undefined`，则表达式会短路并计算为值 `undefined`。 您不能将任何内容分配给值 `undefined`。 这就像试图告诉邮件员将包裹送到“不存在”的概念一样。

因为赋值的左侧必须是有效的、明确的引用（lvalue），并且可选链可以产生一个值 (`undefined`)，所以完全不允许该语法，以防止歧义和运行时错误。

开发人员的困境：安全属性赋值的需要

仅仅因为不支持该语法并不意味着需求消失了。 在无数的现实世界应用程序中，我们需要修改深度嵌套的对象，而不能确定整个路径是否存在。 常见场景包括：

• UI 框架中的状态管理： 当在 React 或 Vue 等库中更新组件的状态时，您通常需要更改深度嵌套的属性，而不会改变原始状态。
• 处理 API 响应： API 可能会返回一个带有可选字段的对象。 您的应用程序可能需要规范化此数据或添加默认值，这涉及到分配给可能不存在于初始响应中的路径。
• 动态配置： 构建一个配置对象，其中不同的模块可以添加自己的设置，需要在运行时安全地创建嵌套结构。

例如，假设您有一个设置对象，并且您想要设置一个主题颜色，但您不确定 `theme` 对象是否已存在。

目标：

const settings = {}; // 我们希望在没有错误的情况下实现此目的： settings.ui.theme.color = 'blue'; // 上一行抛出：“TypeError: Cannot set properties of undefined (setting 'theme')”

那么，我们如何解决这个问题呢？ 让我们探索现代 JavaScript 中可用的几种强大而实用的模式。

JavaScript 中安全属性修改的策略

虽然不存在直接的“可选链赋值”运算符，但我们可以使用现有 JavaScript 功能的组合来实现相同的结果。 我们将从最基本的到更高级和声明式的解决方案逐步进行。

模式 1：经典的“保护子句”方法

最直接的方法是在进行赋值之前手动检查链中每个属性的存在。 这是在 ES2020 之前的方法。

代码示例：

const user = { profile: {} }; // 我们只想在路径存在时才进行赋值 if (user && user.profile && user.profile.address) { user.profile.address.street = '456 Tech Park'; }

• 优点： 非常明确且易于任何开发人员理解。 它与所有版本的 JavaScript 兼容。
• 缺点： 非常冗长且重复。 对于深度嵌套的对象来说，它变得难以管理，并导致通常被称为对象“回调地狱”的情况。

模式 2：利用可选链进行检查

我们可以通过使用我们的朋友，可选链运算符，来显着清理经典方法，用于 `if` 语句的条件部分。 这将安全读取与直接写入分开。

代码示例：

const user = { profile: {} }; // 如果 'address' 对象存在，则更新街道 if (user?.profile?.address) { user.profile.address.street = '456 Tech Park'; }

这是可读性的巨大改进。 我们一次性安全地检查整个路径。 如果路径存在（即，表达式不返回 `undefined`），那么我们继续进行赋值，我们现在知道这是安全的。

• 优点： 比经典的保护子句方法更简洁易读。 它清楚地表达了意图：“如果此路径有效，则执行更新。”
• 缺点： 它仍然需要两个单独的步骤（检查和赋值）。 至关重要的是，如果路径不存在，此模式不会创建该路径。 它只会更新现有的结构。

模式 3：“边构建边走”路径创建（逻辑赋值运算符）

如果我们的目标不仅仅是更新，而是确保路径存在，并在必要时创建它，该怎么办？ 这就是 逻辑赋值运算符（在 ES2021 中引入）发挥作用的地方。 此任务最常见的运算符是 逻辑 OR 赋值 (`||=`)。

表达式 `a ||= b` 是 `a = a || b` 的语法糖。 它的意思是：如果 `a` 是一个虚值（`undefined`、`null`、`0`、`''` 等），则将 `b` 分配给 `a`。

我们可以链接此行为以逐步构建对象路径。

代码示例：

const settings = {}; // 在分配颜色之前，确保 'ui' 和 'theme' 对象存在 (settings.ui ||= {}).theme ||= {}; settings.ui.theme.color = 'darkblue'; console.log(settings); // 输出：{ ui: { theme: { color: 'darkblue' } } }

它的工作原理：

1. `settings.ui ||= {}`：`settings.ui` 是 `undefined`（虚值），因此被分配一个新的空对象 `{}`。 整个表达式 `(settings.ui ||= {})` 计算为这个新的对象。
2. `{}.theme ||= {}`：然后我们访问新创建的 `ui` 对象上的 `theme` 属性。 它也是 `undefined`，因此它被分配一个新的空对象 `{}`。
3. `settings.ui.theme.color = 'darkblue'`：既然我们已经保证了路径 `settings.ui.theme` 存在，我们就可以安全地分配 `color` 属性。

• 优点： 对于按需创建嵌套结构来说，非常简洁且强大。 这是现代 JavaScript 中非常常见和惯用的模式。
• 缺点： 它直接改变了原始对象，这在函数式或不可变编程范例中可能不是期望的。 对于不熟悉逻辑赋值运算符的开发人员来说，该语法可能有点神秘。

模式 4：使用实用程序库的函数式和不可变方法

在许多大型应用程序中，特别是那些使用 Redux 等状态管理库或管理 React 状态的应用程序中，不变性是一个核心原则。 直接改变对象会导致不可预测的行为和难以追踪的错误。 在这些情况下，开发人员通常会求助于 Lodash 或 Ramda 等实用程序库。

Lodash 提供了一个 `_.set()` 函数，该函数专门用于解决这个问题。 它接受一个对象、一个字符串路径和一个值，并且它将安全地在该路径上设置该值，并创建任何必要的嵌套对象。

Lodash 的代码示例：

import { set } from 'lodash-es'; const originalUser = { id: 101 }; // _.set 默认会改变对象，但通常与克隆一起用于不变性。 const updatedUser = set(JSON.parse(JSON.stringify(originalUser)), 'profile.address.street', '789 API Boulevard'); console.log(originalUser); // 输出：{ id: 101 }（保持不变） console.log(updatedUser); // 输出：{ id: 101, profile: { address: { street: '789 API Boulevard' } } }

• 优点： 高度声明式且可读。 意图 (`set(object, path, value)`) 非常明确。 它可以完美地处理复杂的路径（包括数组索引，如 `'posts[0].title'`）。 它非常适合不可变更新模式。
• 缺点： 它向您的项目引入了外部依赖项。 如果这是您需要的唯一功能，那么它可能有点过头了。 与原生 JavaScript 解决方案相比，存在少量性能开销。

展望未来：真正的可选链赋值？

鉴于对该功能的明确需求，TC39 委员会（标准化 JavaScript 的小组）是否考虑添加一个用于可选链赋值的专用运算符？ 答案是肯定的，已经讨论过了。

但是，该提案目前未处于活动状态或未通过各个阶段。 主要挑战是定义其确切行为。 考虑表达式 `a?.b = c;`。

• 如果 `a` 是 `undefined`，应该发生什么？
• 是否应该以静默方式忽略该赋值（“无操作”）？
• 是否应该抛出不同类型的错误？
• 整个表达式是否应该计算为某个值？

这种模糊性以及对最直观行为缺乏明确的共识是该功能尚未实现的主要原因。 目前，我们上面讨论的模式是处理安全属性修改的标准、公认的方法。

实际场景和最佳实践

有了几种模式可供我们使用，我们如何为这项工作选择正确的模式？ 这是一个简单的决策指南。

何时使用哪种模式？ 决策指南

• 当以下情况时，使用 `if (obj?.path) { ... }`：
  • 您只想在父对象已经存在时才修改属性。
  • 您正在修补现有数据，并且不想创建新的嵌套结构。
  • 示例： 更新用户的 'lastLogin' 时间戳，但前提是 'metadata' 对象已经存在。
• 当以下情况时，使用 `(obj.prop ||= {})...`：
  • 您想要确保路径存在，如果缺少路径，则创建它。
  • 您对直接对象突变感到满意。
  • 示例： 初始化一个配置对象，或将一个新项目添加到可能还没有该部分的用户配置文件中。
• 当以下情况时，使用像 Lodash `_.set` 这样的库：
  • 您正在使用一个已经使用该库的代码库。
  • 您需要遵守严格的不变性模式。
  • 您需要处理更复杂的路径，例如那些涉及数组索引的路径。
  • 示例： 在 Redux reducer 中更新状态。

关于 Nullish Coalescing Assignment (`??=`) 的说明

重要的是要提到 `||=` 运算符的一个近亲：Nullish Coalescing Assignment (`??=`)。 虽然 `||=` 在任何虚值（`undefined`、`null`、`false`、`0`、`''`）上触发，但 `??=` 更精确，仅在 `undefined` 或 `null` 上触发。

当一个有效的属性值可以是 `0` 或一个空字符串时，这种区别至关重要。

代码示例：`||=` 的陷阱

const product = { name: 'Widget', discount: 0 }; // 我们想要应用一个 10 的默认折扣，如果没有设置折扣。 product.discount ||= 10; console.log(product.discount); // 输出：10（不正确！折扣是有意设置为 0 的）

在这里，因为 `0` 是一个虚值，所以 `||=` 错误地覆盖了它。 使用 `??=` 可以解决这个问题。

代码示例：`??=` 的精确性

const product = { name: 'Widget', discount: 0 }; // 仅当折扣为 null 或 undefined 时才应用默认折扣。 product.discount ??= 10; console.log(product.discount); // 输出：0（正确！） const anotherProduct = { name: 'Gadget' }; // 折扣是 undefined anotherProduct.discount ??= 10; console.log(anotherProduct.discount); // 输出：10（正确！）

最佳实践： 当创建对象路径（最初总是 `undefined`）时，`||=` 和 `??=` 是可以互换的。 但是，当为可能已经存在的属性设置默认值时，最好使用 `??=`，以避免无意中覆盖有效的虚值，如 `0`、`false` 或 `''`。

结论：掌握安全且有弹性的对象修改

虽然原生“可选链赋值”运算符仍然是许多 JavaScript 开发人员的愿望清单项，但该语言提供了一个强大而灵活的工具包来解决安全属性修改的根本问题。 通过超越对缺少运算符的最初问题，我们更深入地了解了 JavaScript 的工作原理。

让我们回顾一下要点：

• 可选链运算符 (`?.`) 是读取嵌套属性的游戏规则改变者，但由于基本的语言语法规则（`lvalue` vs. `rvalue`），它不能用于赋值。
• 对于仅更新现有路径，将现代 `if` 语句与可选链 (`if (user?.profile?.address)`) 结合使用是最简洁且最可读的方法。
• 对于通过即时创建来确保路径存在，逻辑赋值运算符 (`||=` 或更精确的 `??=`) 提供了一个简洁而强大的原生解决方案。
• 对于需要不变性或处理高度复杂路径分配的应用程序，像 Lodash 这样的实用程序库提供了一个声明式且强大的替代方案。

通过理解这些模式并知道何时应用它们，您可以编写不仅更简洁、更现代，而且更有弹性且更不容易出现运行时错误的 JavaScript。 您可以自信地处理任何数据结构，无论它有多嵌套或不可预测，并构建按设计具有弹性的应用程序。